import React, { useCallback } from 'react';
import ReactFlow, { Controls, addEdge, ReactFlowProvider} from 'reactflow';

import 'reactflow/dist/base.css';
import TurboNode from './TurboNode';
import TurboEdge from './TurboEdge';
import DownloadButton from './DownloadButton';

const nodeTypes = {
  turbo: TurboNode,
};

const edgeTypes = {
  turbo: TurboEdge,
};

const defaultEdgeOptions = {
  type: 'turbo',
  markerEnd: 'edge-circle',
};

const Flow = (props: any) => {
  // ** Props
  const {
    nodes,
    onNodesChange,
    edges,
    setEdges,
    onEdgesChange
  } = props

  const onConnect = useCallback((params: any) => setEdges((els: any) => addEdge(params, els)), []);

  return (
    <ReactFlowProvider>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        fitView
        nodeTypes={nodeTypes}
        edgeTypes={edgeTypes}
        defaultEdgeOptions={defaultEdgeOptions}
      >
        <Controls showInteractive={false} />
        <svg>
          <defs>
            <linearGradient id="edge-gradient">
              <stop offset="0%" stopColor="#ae53ba" />
              <stop offset="100%" stopColor="#2a8af6" />
            </linearGradient>

            <marker
              id="edge-circle"
              viewBox="-5 -5 10 10"
              refX="0"
              refY="0"
              markerUnits="strokeWidth"
              markerWidth="10"
              markerHeight="10"
              orient="auto"
            >
              <circle stroke="#2a8af6" strokeOpacity="0.75" r="2" cx="0" cy="0" />
            </marker>
          </defs>
        </svg>
        <DownloadButton />
      </ReactFlow>
    </ReactFlowProvider>
  );
};

export default Flow;
